<template>
  <div>
    <el-dialog
      v-loading.lock="loading"
      class="base-dialog system-user-dialog"
      :custom-class="'panna-dialog_big'"
      :append-to-body="true"
      :title="dataList.MainRequestDetails"
      align="center"
      :close-on-click-modal="false"
      :visible.sync="innerDialogFormVisible"
    >
      <DeviceRepairView :id="id"></DeviceRepairView>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button @click="cancel">{{ btn.Return }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import DeviceRepairView from "./DeviceRepairView.vue";
import { get } from "../../api/DeviceRepair.js";
import { formatTime } from "../../utils/time";
export default {
  name: "DeviceRepairViewDialog",
  components: { DeviceRepairView },
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      formatTime,
      loading: false,
      innerDialogFormVisible: false,
      formLabelWidth: "120px",
      list: [],
      formData: {
        id: 0,
        num: "",
        deviceNum: "",
        statusId: 0,
        statusName: "",
        creatorId: 0,
        creatorName: "",
        reason: "",
        calibrationDate: 0,
        repairFactory: "",
        repairStatus: 0,
        repairStatusName: "",
        repairMethid: "",
        repairResult: "",
        repairFactoryView: "",
        repairPerson: "",
        repairRemark: "",
        remark: "",
        deviceId: 0,
      },
    };
  },
  computed: {
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
    dataList() {
      return this.$t("ModuleDevice.Device");
    },
  },
  watch: {
    dialogFormVisible(val) {
      this.innerDialogFormVisible = val;
    },
    innerDialogFormVisible(val) {
      this.$emit("update:dialogFormVisible", val);
    },
  },
  created() {
    this.innerDialogFormVisible = this.dialogFormVisible;

    get({ id: this.id }).then((res) => {
      this.formData = res.data;
      this.list = res.data.deviceDtos;
    });
  },
  methods: {
    cancel() {
      this.innerDialogFormVisible = false;
    },
    closeDialog() {
      this.cancel();
    },
  },
};
</script>
